<template>
    <label>
        <div>{{title}}</div>
        <textarea :rows="rows" v-model="content" @input="$emit('update:modelValue',$event.target.value)"></textarea>{{content}}
    </label>
</template>

<script>
    export default {
        props:{
            title:{
                type:String,
            },
            modelValue:{
                type:String,
            },
            rows:{
                type:Number,
                default:3
            }
        },
        emits:['update:modelValue'],
        data() {
            return{
                content : this.modelValue
            }
        },
    }
</script>

<style lang="scss" scoped>
    label{
        display:flex;
        align-items: center;
        margin-bottom:10px;
        div{
            color:#666;
            font-size: 14px;;
            margin-right:10px;
            width:80px;
        }
        textarea{
            outline:none;
            border: 1px solid #ddd;
            color:#666;
            padding:5px 10px;
        }
    }
</style>